<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box">
        <p>111</p>
        <span onclick="del(this)">x</span>
    </div>

    <div onclick="fn('hello')">111</div>
    <div onclick="fn(this)">222</div>

    <script>

        // 行内事件  直接在标签上绑定  onclick="函数()"
        //    如果需要传参 -- 记得使用引号
        //    如果需要使用到 this    必须以传参的方式接收

        // 普通的绑定事件


        // var oDiv = document.querySelector('div:nth-child(2)');
        // oDiv.onclick = function () {
        //     alert(2)
        // }


        function fn(_this) {
            console.log(_this);
        }

        fn(1);

        var oSpan = document.querySelector('span');
        oSpan.onclick = function () {
            console.log(222);
        }


        function del(_this) {
            _this.parentElement.remove()
        }



    </script>

</body>

</html>